<template>
    <div class="HelloWorld">
        <!-- v-for遍历 -->
         <hr/>
         <table>
            <thead>
                <tr style="background-color: darkgray;">
                  <td>编号</td>
                  <td>登录姓名</td>
                  <td>日期</td>
                  <td>级别</td>
                  <td>标识</td>
                </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in data.data" :key="index">
                  <td>{{item.loginLogId}}</td>
                  <td>{{item.loginLogName}}</td>
                  <td>{{item.loginLogTime}}</td>
                  <td>{{item.loginLogLevel}}</td>
                  <td>{{item.loginLogFlag}}</td>
              </tr>
            </tbody>
         </table>
    </div>
</template>
<script>
export default {
    name: 'HelloWorld',
    data () {
        // return里面是变量
        return {
            msg: '1111',
            age: 10,
            data: {
            "code": 1,
            "msg": "success",
            "data": [
                {
                    "loginLogId": 43,
                    "loginLogName": "荆国辉",
                    "loginLogTime": "2026-08-13 01:03:51",
                    "loginLogLevel": 57.0,
                    "loginLogFlag": "移动端",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 42,
                    "loginLogName": "施苡沫",
                    "loginLogTime": "2026-05-18 16:52:44",
                    "loginLogLevel": 49.0,
                    "loginLogFlag": "电脑端",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 41,
                    "loginLogName": "雍梓萱",
                    "loginLogTime": "2024-11-27 18:00:55",
                    "loginLogLevel": 7.0,
                    "loginLogFlag": "移动端",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 40,
                    "loginLogName": "频建国",
                    "loginLogTime": "2026-04-11 08:01:37",
                    "loginLogLevel": 84.0,
                    "loginLogFlag": "电脑端",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 39,
                    "loginLogName": "闻人诚",
                    "loginLogTime": "2026-02-14 22:28:19",
                    "loginLogLevel": 28.0,
                    "loginLogFlag": "移动端",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 38,
                    "loginLogName": "贺军",
                    "loginLogTime": "2024-09-10 12:52:03",
                    "loginLogLevel": 5.0,
                    "loginLogFlag": "电脑端",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 35,
                    "loginLogName": "孔义轩",
                    "loginLogTime": "2025-07-27 21:27:03",
                    "loginLogLevel": 24.0,
                    "loginLogFlag": "移动端",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 34,
                    "loginLogName": "admin",
                    "loginLogTime": "2025-08-09 10:21:16",
                    "loginLogLevel": 3.0,
                    "loginLogFlag": "1",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 33,
                    "loginLogName": "财务部",
                    "loginLogTime": "2025-08-14 19:26:17",
                    "loginLogLevel": 3.0,
                    "loginLogFlag": "dd",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 32,
                    "loginLogName": "发明都1",
                    "loginLogTime": "2025-08-14 16:44:04",
                    "loginLogLevel": 3.0,
                    "loginLogFlag": "8",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 27,
                    "loginLogName": "新增333",
                    "loginLogTime": "2025-08-31 10:21:16",
                    "loginLogLevel": 6.0,
                    "loginLogFlag": "2",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 26,
                    "loginLogName": "别别别",
                    "loginLogTime": "2025-08-16 12:23:19",
                    "loginLogLevel": 8.0,
                    "loginLogFlag": "2",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 25,
                    "loginLogName": "登雯静",
                    "loginLogTime": "2026-02-02 08:49:33",
                    "loginLogLevel": 89.0,
                    "loginLogFlag": "电脑端",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 24,
                    "loginLogName": "节玉英",
                    "loginLogTime": "2025-08-31 10:21:16",
                    "loginLogLevel": 6.0,
                    "loginLogFlag": "移动端",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 23,
                    "loginLogName": "代军有",
                    "loginLogTime": "2025-08-31 10:21:16",
                    "loginLogLevel": 72.0,
                    "loginLogFlag": "pa",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                },
                {
                    "loginLogId": 22,
                    "loginLogName": "阎浩轩",
                    "loginLogTime": "2025-08-07 10:21:16",
                    "loginLogLevel": 5.0,
                    "loginLogFlag": "enim",
                    "fromIndex": null,
                    "pageSize": null,
                    "currentIndex": null
                }
            ]
                    }
                };
    },
    mounted() {
        // 组件挂载之后执行的函数
    },
    /**
     * 监听变量变化 网页变化会触发该函数，并将新值和旧值传回到逻辑层（JS）
     * 1. 方法格式的监听器，以变量名作为方法名，方法内有两个参数，第一个参数是新值，
     * 第二个参数是旧值（页面初始化时，不触发，旧值是undefined）
     * 对象的属性变化，如颜色变化，不触发该函数，需要使用watch监听对象属性变化
     */
    watch: {
        age(newVal, oldVal) {
            console.log('age 变化了，新值：' + newVal + '，旧值：' + oldVal);
    }
  },
    methods: {
        // 方法
        change() {
            // 自定义方法
            this.age = this.age + 1;
        },
    }
};
</script>
<style scoped>
    
</style>